import Vue,{VNode} from 'vue';
import {event} from 'quasar';
const {stopAndPrevent}=event;
/**
 * 单选框
 * @author 唐国雄
 * @date 2021/7/27
 * 属性----------------------
 * v-model		当前值, any
 * :label		标签, string
 * :val			此选项代表的值, any
 * :color		颜色, string
 * :disable		禁用, boolean
 * 事件----------------------
 * @input
 * 插槽----------------------
 * #default		标签(比:label优先)
 */
export default Vue.extend({
	name:'Radio',
	props:{
		//当前值
		value:{
			required:true,
		},
		//标签
		label:String,
		//此选项代表的值
		val:{
			required:true,
		},
		//颜色
		color:String,
		//禁用
		disable:Boolean,
	},
	computed:{
		classes():string{
			return 'lexmis-Radio'+
				(this.isOn?' lexmis--true':' lexmis--false')+
				(this.disable?' lexmis--disable':' lexmis--hoverable');
		},
		//是否启用
		isOn():boolean{
			return this.value===this.val;
		},
	},
	methods:{
		$_lexmis_onClick(e:Event){
			stopAndPrevent(e);
			if(this.isOn||this.disable) return;
			this.$emit('input',this.val);
		},
	},
	render(h):VNode{
		const {default:slot}=this.$scopedSlots;
		const labelContent=slot?slot(undefined):this.label;
		return h('div',{
			staticClass:this.classes,
			staticStyle:{
				color:this.color
			},
			attrs:{
				tabindex:this.disable?-1:0,
			},
			on:{
				click:this.$_lexmis_onClick
			}
		},[
			h('svg',{
				staticClass:'lexmis-Icon',
				attrs:{focusable:'false',viewBox:'0 0 24 24','aria-hidden':'true'}
			},[
				h('path',{
					attrs:{
						d:'M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12'
					}
				}),
				h('path',{
					staticClass:'lexmis_true',
					attrs:{
						d:'M12,6a6,6 0 0 0 -6,6a6,6 0 0 0 6,6a6,6 0 0 0 6,-6a6,6 0 0 0 -6,-6'
					}
				})
			]),
			labelContent
				?h('div',{
					staticClass:'lexmis_label',
				},labelContent)
				:null
		]);
	}
});
